<%@page import="org.proddevplm.dao.data.Product"%>
<%@page import="java.util.List"%>
<script>
	$(function(){
		$("#consumerTabs").tabs();
		$("input:submit").button();
		$("#issueSubmission").hide();
		$("#extraFunction").hide();
	})
	
	function getTechnicalDetails(productId){
		alert(productId);
	}
	
</script>

<%
	List<Product> allProducts = (List)session.getAttribute("allProducts");
%>

<div class="containerBig" style="width:100%;">
	
	<div id="consumerTabs" >
	
		<ul style="font-size:small; font-weight:bold">
			<li><a href="#consumerTabs-1" onclick="$('#extraFunction').hide()">Something is not working</a></li>
			<li><a href="#consumerTabs-2" onclick="$('#issueSubmission').hide()">I need more functions</a></li>
			<li><a href="#consumerTabs-3" onclick="$('#extraFunction').hide(), $('#issueSubmission').hide()">Technical data</a>
			<li><a href="#consumerTabs-4" onclick="$('#extraFunction').hide(), $('#issueSubmission').hide()">Contact us</a></li>
		</ul>
		
		<div id="consumerTabs-1" style="padding:1em 0em">
			<div class="containerSmall" style="font-size:small">
				<div class="pageTitle" style="text-align:center; padding:0.5%">
					<b>Please tell us what is wrong with the product</b>
				</div>
				
				<div style="width:100%; margin-top:10px; color:#555555">
					<div style="width:20%; float:left">
						<b>Please select your product:</b>
					</div>
					<select class="regInput" id="tab1ProductSelect" size="1" onchange="$('#issueSubmission').show(), $('#issueProductId').val(this.value)" style="width:30%; overflow:auto;">
						<option SELECTED value="">-select product-</option>
						<%for(int i=0; i<allProducts.size(); i++){
							Product p = allProducts.get(i);%>
							<option value="<%=p.getId() %>"><%=p.getName() %></option>
						<%} %>
					</select>
				</div>
				
				<div id="issueSubmission" style="width:100%; margin-top:10px">
					<form name="submitIssueForm" action="/proddev/CommonsFileUploadServlet" enctype="multipart/form-data" method="post" style="margin:0">
                        <input type="hidden" id="issueProductId" name="issueProductId">
                        <input type="hidden" name="type" value="guestIssueUpload">
						<div>
							<div style="width: 20%; float:left">
								<b>Please add product identifier:</b><br/>
								<span style="font-size:smaller">e.g. serial no.</span>
							</div>
							<input class="regInput" id="uniqueId" name="uniqueId" type="text" style="width:30%; float:left">
							<div style="clear:both"></div>
						</div>
						
						<div style="margin-top:10px">
							<b>Please select the type of problem:</b>
						</div>
						<select class="regInput" name="problemType" size="7" style="width:50%; margin-top:5px">
							<option value="design problem">Design issue</option>
							<option value="technical problem">Technical problem</option>
							<option value="manufacturing defect">Manufacturing defect</option>
							<option value="accessories">Accessories and / or consumables problem</option>						
							<option value="after sales">After sales problem</option>
							<option value="recycling issue">Recycling issue</option>
							<option value="other">Other type of problem</option>
						</select>
						
						<div style="margin-top:10px">
							<b>Describe the problem you are encountering:</b>
						</div>
						<textarea class="regInput" id="problemDescription" name="problemDescription" rows="5" style="width:50%; margin-top:5px"></textarea>
						
						<div style="margin-top:10px">
							<b>Attach any file that might help us with your issue</b>
						</div>
						<div style="width:50%; margin-top:5px">
							<div style="width:60%; position:relative; float:left">	
								<input id="problemAttachment" type="file" name="problemAttachment" onchange="$('#fileAddress').val(this.value)" style="position:relative; -moz-opacity:0; filter:alpha(opacity: 0); opacity: 0; z-index:2"/>
								<input class="regInput" id="fileAddress" name="fileAddress" type="text" style="width:100%; height:30px; position:absolute;top:0px; left:0px; z-index:1;"/>
							</div>
							<input type="submit" value="Submit issue" style="float:right"/>
							<div style="clear:both"></div>
						</div>
					</form>
				</div>
			</div>
		</div>
		
		<div id="consumerTabs-2" style="padding:1em 0em">
			<div class="containerSmall" style="font-size:small">
				<div class="pageTitle" style="text-align:center; padding:0.5%">
					<b>Please tell us what function would you need for the product</b>
				</div>
				
				<div style="width:100%; margin-top:10px; color:#555555">
					<div style="width:20%; float:left">
						<b>Please select your product:</b>
					</div>
					<select class="regInput" id="tab2ProductSelect" size="1" onchange="$('#extraFunction').show(), $('#functionsProductId').val(this.value)" style="width:30%; overflow:auto;">
						<option SELECTED value="">-select product-</option>
						<%for(int i=0; i<allProducts.size(); i++){
							Product p = allProducts.get(i);%>
							<option value="<%=p.getId() %>"><%=p.getName() %></option>
						<%} %>
					</select>
				</div>
				<div id="extraFunction" style="width:100%; margin-top:10px">
					<form name="submitExtraFunctionForm" action="/proddev/CommonsFileUploadServlet" enctype="multipart/form-data" method="post" style="margin:0">
						<input type="hidden" id="functionsProductId" name="functionsProductId">
                        <input type="hidden" name="type" value="guestFunctionUpload">
						
						<div style="margin-top:10px">
							<b>Describe the function you would need:</b>
						</div>
						<textarea class="regInput" name="functionDescription" id="functionDescription" rows="5" style="width:50%; margin-top:5px"></textarea>
						
						<div style="margin-top:10px">
							<b>Attach any file that might help us</b>
						</div>
						<div style="width:50%; margin-top:5px">
							<div style="width:60%; position:relative; float:left">	
								<input id="functionAttachment" name="functionAttachment" type="file" onchange="$('#functionFileAddress').val(this.value)" style="position:relative; -moz-opacity:0; filter:alpha(opacity: 0); opacity: 0; z-index:2"/>
								<input class="regInput" id="functionFileAddress" type="text" style="width:100%; height:30px; position:absolute;top:0px; left:0px; z-index:1;"/>
							</div>
							<input type="submit" value="Submit function" style="float:right"/>
							<div style="clear:both"></div>
						</div>
					</form>
				</div>
			</div>
		</div>
		
		<div id="consumerTabs-3" style="padding:1em 0em">
			<div class="containerSmall" style="font-size:small">
				<div class="pageTitle" style="text-align:center; padding:0.5%">
					<b>Find out technical details about your product</b>
				</div>
				
				<div style="width:100%; margin-top:10px; color:#555555">
					<div style="width:20%; float:left">
						<b>Please select your product:</b>
					</div>
					<select class="regInput" id="tab3ProductSelect" size="1" onchange="getTechnicalDetails(this.value)" style="width:30%; overflow:auto;">
						<option SELECTED value="">-select product-</option>
						<%for(int i=0; i<allProducts.size(); i++){
							Product p = allProducts.get(i);%>
							<option value="<%=p.getId() %>"><%=p.getName() %></option>
						<%} %>
					</select>
				</div>
			</div>
		</div>

		<div id="consumerTabs-4" style="padding:1em 0em">
			<div class="containerSmall" style="font-size:small">
				<div class="pageTitle" style="text-align:center; padding:0.5%">
					<b>Contact our development team</b>
				</div>
				
				<div style="width:100%; margin-top:10px; color:#555555">
					<div style="width:20%; float:left">
						<b>Please select your product:</b>
					</div>
					<select class="regInput" id="tab4ProductSelect" size="1" onchange="" style="width:30%; overflow:auto;">
						<option SELECTED value="">-select product-</option>
						<%for(int i=0; i<allProducts.size(); i++){
							Product p = allProducts.get(i);%>
							<option value="<%=p.getId() %>"><%=p.getName() %></option>
						<%} %>
					</select>
				</div>
				
			</div>
		</div>
		
	</div>
</div>